import { Button, Form, Input, Card, Col, Row, message } from 'antd';
import React from 'react';
import { useModel, history } from 'umi';
const login = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const onFinish = async (values) => {
    // 登录状态
    const loginState = {
      isLogin: true,
      userInfo: values,
    };
    await setInitialState(loginState);
    window.localStorage.setItem('useInfo', JSON.stringify(loginState));
    message.success('登录成功！');
    history.push('/');
  };

  return (
    <Row align="middle" justify="center">
      <Col span={8}>
        <Card title="登录" headStyle={{ textAlign: 'center' }}>
          <Form
            name="basic"
            labelCol={{
              span: 4,
            }}
            wrapperCol={{
              span: 20,
            }}
            initialValues={{
              username: 123,
              password: '123',
            }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="账号"
              name="username"
              rules={[
                {
                  required: true,
                  message: 'Please input your username!',
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: 'Please input your password!',
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 10,
                span: 14,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </Col>
    </Row>
  );
};
export default login;
